<template>
  <a-table
    :dataSource="dataSource"
    :columns="columns"
    :pagination="query"
    @change="onChange"
    force-render
  >
    <template #bodyCell="{ column = {}, text, record, index }">
      <template v-if="column.key === 'gmtCreate'">{{
        gmtCreateFormat(text)
      }}</template>
      <template v-else-if="column.key === 'dataName'">
        <div style="display: flex; align-items: center">
          <iconfont
            style="font-size: 24px; margin-right: 10px"
            name="#icon-wenjian"
          />
          <div>{{ text }}</div>
        </div>
      </template>
      <template v-else>{{ text }}</template>
    </template>
    <template #emptyText>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
        "
      >
        <a-spin :spinning="loading">
          <a-empty
            :image="notData"
            :description="loading ? '加载中...' : '暂无数据'"
          />
        </a-spin>
      </div>
    </template>
  </a-table>
  <!-- </a-config-provider> -->
</template>
<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import dayjs from 'dayjs'
import ATable from '@/components/table.vue'
// import EditButton from './table-content-edit.vue'
// import CancelButton from './table-content-cancel.vue'
// import InvalidButton from './table-content-invalid.vue'
// import InputName from './table-content-input-name.vue'
// import MoreButton from './table-content-more.vue'
// import iconfont from '@/components/iconfont.vue'
// import FolderDrawer from './table-content-folder-drawer.vue'
import notData from '@/assets/images/not-data.png'
import {
  useColumns,
  useQuery,
  useDataSourceManager,
  useDataSource,
  useLineheight,
  useLoading,
  useGroupId,
  useRowSelection,
  useRowSelectionActive,
  useSortCreatetimeType,
  usePermission,
} from './provide-context.js'
import iconfont from '@/components/iconfont.vue'

/**
 * 全局数据
 */
let columns = useColumns()
let dataSource = useDataSource()
let query = useQuery()
let loading = useLoading()
let groupId = useGroupId()
let { update } = useDataSourceManager()

/**
 * table查询逻辑
 */
//table组件翻页事件，调用hooks
function onChange({ current, pageSize }, filters, sorter) {
  query.value.current = current
  query.value.pageSize = pageSize
  // query.value.filters = filters
  // sortCreatetimeType.value = sorter
  // //添加过滤状态
  // columns?.value.forEach(column => {
  //   let { key } = column
  //   column.filteredValue = filters?.[key]
  // })

  update()
}
//初始化调用
onMounted(() => {
  query.value.current = 1
  query.value.pageSize = 10
  update()
})
//groupId变化
watch(groupId, () => {
  query.value.current = 1
  update()
})
/**
 * 时间格式化
 */
function gmtCreateFormat(t) {
  return dayjs.utc(t).format('YYYY-MM-DD HH:mm:ss')
}
</script>
